<!--
 * @Author: boyyang
 * @Date: 2022-01-16 11:11:50
 * @LastEditTime: 2022-01-26 17:10:44
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\fullScreenLoading\loadingProvider.vue
-->

<template>
    <teleport to="body">
        <div class="loading">
            <loading-item :is-show="isShow" :text="text"></loading-item>
        </div>
    </teleport>

    <slot></slot>
</template>

<script lang="ts" setup>
import { ILoadingProviderApi, fullScreenLoadingInjectKey } from './index'

const isShow = ref<boolean>(false)
const text = ref<string>('LOADING~~')

const api: ILoadingProviderApi = {
    start(option) {
        if (option && option.text) {
            text.value = option.text
        }
        isShow.value = true
    },
    end(option) {
        if (option && option.text) {
            text.value = option.text
        } else {
            text.value = 'LOADING~~~'
        }
        isShow.value = false
    }
}

provide(fullScreenLoadingInjectKey, api)


</script>

<style scoped lang="scss">
.loading {
    width: 100%;
    height: 0;
}
</style>
